<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


    <link rel="stylesheet" href="${APP_PATH}/static/css/signin.css">
</head>
<body class="text-center">

<div class="px-5 bg-white rounded shadow" style="margin-left: auto;margin-right: auto;">
    <form class="form-signin">
        <div>
            <img src="${APP_PATH}/images/logo.jpg" width="200px" alt="logo">
        </div>
        <h1 class="h3 mb-1 font-weight-normal">请登录&nbsp;&nbsp;&nbsp;<span class="btn display-4">没有账号，点我<a
                href="${APP_PATH}/register">注册</a></span></h1>

        <label for="inputTel" class="sr-only">请输入手机号</label>
        <input type="tel" id="inputTel" class="form-control" placeholder="手机号" onkeyup="value=value.replace(/[^\d]/g,'')"
               maxlength="11" name="tel" required>

        <label for="inputPassword" class="sr-only">请输入密码</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="密码" maxlength="16" name="password"
               required>
        <%--验证码--%>
        <div class="text-left">
            <div class="pt-2">
                <a href="#" id="create-verification-code">获取新验证码</a>
                <img id="img-code" src="/img-code" alt="验证码">
            </div>

            <div>
                <input id="code" class="form-control" type="text" maxlength="6" name="code" placeholder="请输入验证码">
            </div>
        </div>

        <div class="checkbox mb-3 float-left">
            <label>
                <input type="checkbox" value="remember-me" checked="checked"> 记住密码&nbsp;&nbsp;&nbsp;&nbsp;
            </label>
        </div>
        <div class="mb-3 float-left">
            <label>
                <a href="${APP_PATH}/findPassword">找回密码</a>
            </label>
        </div>
        <button id="login-btn" class="btn btn-lg btn-primary btn-block" type="button">登录</button>
    </form>
</div>

</body>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>

<script>
    var i=1;
    $("#create-verification-code").click(function () {
        //为了使改动生效
        $("#img-code").attr("src","/img-code?i="+i);
        i++;
    });

    //正则验证字段
    function validate() {
        var regex_tel = /^1[0-9]{10}$/;
        var regex_password = /^[a-zA-Z0-9]{8,16}$/;
        if (!regex_tel.test($("input[name='tel']").val())) {
            toastr.error("你的手机号填写格式不正确，请重试！");
            return false;
        }

        if (!regex_password.test($("input[name='password']").val())) {
            toastr.error("密码格式不正确，由8-16位字母或数字组成！");
            return false;
        }
        if ($("#code").val().length < 5) {
            toastr.error("验证码错误！");
            return false;
        }
        return true;
    }

    //点击登录
    $("#login-btn").click(function () {
        if (validate()) {
            $.ajax({
                url: "/login",
                type: "POST",
                data: $("form").serialize(),
                success: function (result) {
                    if (result.code === 100) {
                        //登录成功，页面跳转
                        window.location.href = "/home";
                    } else if (result.code === 200) {
                        //登录失败
                        toastr.error(result.extend.error);
                        return false;
                    }
                }
            });
        }
    });
</script>
</html>
